<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- Header -->
<header data-am-widget="header"
	class="am-header am-header-default am-header-fixed">
	<div class="am-header-left am-header-nav">
		<a id="window-back" href="javascript:void(0)" data-am-offcanvas> <i
			class="am-icon-chevron-left"></i> <span class="am-header-nav-title">注册</span>
		</a>
	</div>
	<h1 class="am-header-title"></h1>
</header>

<div style="height: 15px"></div>

<!-- register form -->
<div class="am-g">
	<div class="am-u-md-12 am-u-sm-centered">
		<form class="am-form my-form">
			<fieldset class="am-form-set">
				<div class="am-form-group">
					<input id="mobile" type="text" name="mobile" placeholder="手机号"
						data-validation-message="手机格式不正确"
						pattern="^1((3|5|8){1}\d{1}|70)\d{8}$" required>
				</div>
				<div class="am-form-group">
					<input id="pwd" type="password" placeholder="密码" required>
				</div>
				<div class="am-form-group">
					<input id="verifyCode" type="text" placeholder="输入收到的验证码"
						class="am-fl" style="width: 60%" required>
					<button id="ctBtn" type="button"
						class="am-btn am-btn-warning am-fr" style="width: 40%">获取验证码</button>
				</div>
			</fieldset>
			<button id="registerBtn" type="button"
				class="am-btn am-btn-success am-btn-block">注册</button>
		</form>
	</div>
</div>

<script type="text/javascript">
	$(function() {

		$('.am-form')
				.validator(
						{
							onValid : function(validity) {
								$(validity.field).closest('.am-form-group')
										.find('.am-alert').hide();
							},

							onInValid : function(validity) {
								var $field = $(validity.field);
								var $group = $field.closest('.am-form-group');
								var $alert = $group.find('.am-alert');
								// 使用自定义的提示信息 或 插件内置的提示信息
								var msg = $field.data('validationMessage')
										|| this.getValidationMessage(validity);

								if (!$alert.length) {
									$alert = $(
											'<div class="am-alert am-alert-danger"></div>')
											.hide().appendTo($group);
								}

								$alert.html(msg).show();
							}
						});

		$('#ctBtn').click(function() {
			if ($('.am-form').data('amui.validator').isValid('#mobile')) {
				$.post('mobile/register/send_sms', {
					mobile : $('#mobile').val()
				}, function(result) {
					if (result.code == 'ACK') {
						if (result.message == 'errorMsg') {
							showAlert(result.data);
						} else {
							execTime($('#ctBtn'));
						}
					}
				}, 'json');
			}
		});
		
		$('#registerBtn').click(function(){
			if($('.am-form').data('amui.validator').isFormValid()){
				$.post('mobile/register', {
					mobile : $('#mobile').val(),
					pwd: $('#pwd').val(),
					verifyCode: $('#verifyCode').val()
				}, function(result) {
					if (result.code == 'ACK') {
						if(result.message == 'errorMsg'){
							showAlert(result.data);
						}else{
							showSuccessMsg(result.data, "mobile/loginPage");
						}
					}
				}, 'json');
			}
		});

	});
</script>